<template>
    <el-dialog
        title="角色管理"
        :visible.sync="dialogVisible"
        width="600"
        :before-close="handleClose">
        <el-transfer
            filterable
            filter-placeholder="请搜索"
            :titles="['未选择用户', '已选择用户']"
            :props="{
                     key: 'userId',
                     label: 'username'
                     }"
            :data="userData"
            v-model="choiceDataList">
        </el-transfer>
        <div slot="footer" class="dialog-footer center">
            <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
            <el-button size="mini" type="primary" v-prevent-re-click @click="editUser">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import ajax from '@api/ajax'
    import {QUERY_USER_INFO, UPDATA_USERORPOST} from '@api/url'

    export default {
        data () {
            return {
                userData: {},
                dialogVisible: false,
                value: [],
                choiceDataList: [],
                form: {},
                type: ''
            }
        },
        methods: {
            // 获取调用页面传入的数据
            userEditFormDialog (formData, data, type) {
                let array = []
                formData.filter((item) => {
                    array.push(item.userId)
                })
                this.choiceDataList = array
                this.dialogVisible = true
                this.form = data
                this.type = type
            },
            // 关闭页面调用的方法
            handleClose () {
                this.dialogVisible = false
            },
            // 查询用户列表
            queryUserList () {
                ajax.post(QUERY_USER_INFO).then(res => {
                    this.userData = res.data.records
                }).catch(err => {
                    console.error('查询发生错误！', err)
                }).finally(() => {
                })
            },
            // 编辑用户
            editUser () {
                let Conditions = {}
                Conditions.userIds = this.choiceDataList
                if (this.type === 'post') {
                    Conditions.postId = this.form
                }
                if (this.type === 'role') {
                    Conditions.roleId = this.form
                }
                ajax.post(UPDATA_USERORPOST, Conditions).then(res => {
                    this.$message.success('成功')
                    this.$emit('editSuccess', this.form)
                    this.dialogVisible = false
                }).catch(err => {
                    console.error('发生错误！', err)
                }).finally(() => {
                })
            }
        },
        mounted () {
            this.queryUserList()
        }
    }
</script>

<style scoped>

</style>
